<template>
  <div class="w-[100%]">
    <px-row :gutter="16">
      <px-col :span="12">
        <px-form-item label="执行方式" prop="execType">
          <px-radio-group v-model="formValueInner.execType" :disabled="isEdit" @change="handleExceTypeChange">
            <px-radio label="1">固定时间</px-radio>
            <px-radio label="2">周期时间</px-radio>
          </px-radio-group>
        </px-form-item>
      </px-col>
    </px-row>
    <px-row :gutter="16">
      <px-col :span="12">
        <px-form-item label="开始日期" prop="execStartDate">
          <px-date-picker
            v-model="formValueInner.execStartDate"
            :disabled="isEdit"
            :disabled-date="disabledDate"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            start-placeholder="开始日期"
            placeholder="请选择开始日期"
            @change="formValueInner.execEndDate = ''"
          />
        </px-form-item>
      </px-col>
      <px-col :span="12">
        <px-form-item label="结束日期" prop="execEndDate">
          <px-date-picker
            v-model="formValueInner.execEndDate"
            :disabled-date="disabledDateEnd"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            start-placeholder="结束日期"
            placeholder="请选择结束日期"
          />
        </px-form-item>
      </px-col>
    </px-row>
    <template v-if="formValueInner.execType === '2'">
      <CheckCycle
        v-model:cycle-per-num="formValueInner.cyclePerNum"
        v-model:cycle-per-unit="formValueInner.cyclePerUnit"
        v-model:cycle-value="formValueInner.cycleValue"
        :referSource="referSource"
      />
      <px-row :gutter="16">
        <px-col :span="12"> <SelectHour :isRequired="true" :cycleTime="formValueInner.cycleTime" @changeCycleTime="handlechangeCycleTime" /> </px-col
      ></px-row>
      <px-row :gutter="16">
        <px-col :span="6">
          <px-form-item prop="execDuration" label="执行时长">
            <px-input-number v-model="formValueInner.execDuration" :min="1" :max="99" controls-position="right" @change="handleExecDurationChange" />
          </px-form-item>
        </px-col>
        <px-col :span="3">
          <px-form-item prop="execDurationUnit" label-width="0" class="pl-[10px] pr-[5px]">
            <px-select v-model="formValueInner.execDurationUnit" @change="handleExecDurationUnitChange" filterable>
              <px-option v-for="item in unitList" :key="item.value" :label="item.label" :value="item.value" />
            </px-select>
          </px-form-item>
        </px-col>
        <px-col :span="6" :offset="4">
          <px-form-item prop="extendDuration" label="宽泛期">
            <px-input-number
              v-model="formValueInner.extendDuration"
              :min="0"
              :max="99"
              controls-position="right"
              @change="handleExtendDurationChange"
            />
          </px-form-item>
        </px-col>
        <px-col :span="3">
          <px-form-item prop="extendDurationUnit" label-width="0" class="pl-[10px] pr-[5px]">
            <px-select v-model="formValueInner.extendDurationUnit" @change="handleExtendDurationUnitChange" filterable>
              <px-option v-for="item in unitList" :key="item.value" :label="item.label" :value="item.value" />
            </px-select>
          </px-form-item>
        </px-col>
      </px-row>
      <px-row :gutter="16">
        <px-col :span="24">
          <px-form-item prop="taskCreateTime" label="任务生成并提醒时间">
            <px-select v-model="formValueInner.taskCreateTime" @change="handleTaskCreateTimehange" clearable filterable>
              <px-option v-for="item in taskList" :key="item.value" :label="item.label" :value="item.value" />
            </px-select>
          </px-form-item> </px-col
      ></px-row>
    </template>
  </div>
</template>
<script setup lang="ts">
import { cloneDeep } from "@pureadmin/utils";
import dayjs from "dayjs";
import { ref, watch } from "vue";
import { CheckCycle, SelectHour } from "./index";

const unitList = [
  { label: "小时", value: "HOUR" },
  { label: "日", value: "DAY" }
];
//1-准点生成,2-提前10分钟,3-提前30分钟,4-提前1小时,5-提前1天
const taskList = [
  { value: 1, label: "准点生成" },
  { value: 2, label: "提前10分钟" },
  { value: 3, label: "提前30分钟" },
  { value: 4, label: "提前1小时" },
  { value: 5, label: "提前1天" }
];
type FormValue = {
  execType: string | number;
  execStartDate: string;
  execEndDate: string;
  execDuration: number;
  execDurationUnit: string;
  extendDuration: number;
  extendDurationUnit: string;
  taskCreateTime: string;
  cyclePerNum: number;
  cyclePerUnit: string;
  cycleValue: string;
  cycleTime: string;
};
const props = defineProps<{ formValue: FormValue; isEdit?: Boolean; referSource?: String }>();
const emits = defineEmits(["change"]);
const formValueTmpl = {
  execType: "1", //执行方式 1-固定时间,2-周期时间
  execStartDate: "",
  execEndDate: "",
  execDuration: 0,
  execDurationUnit: "",
  extendDuration: 0,
  extendDurationUnit: "",
  cyclePerNum: 0,
  cyclePerUnit: "DAY",
  cycleValue: "",
  cycleTime: "",
  taskCreateTime: ""
};
const formValueInner = ref<FormValue>(cloneDeep(formValueTmpl));
watch(
  () => props.formValue,
  () => {
    formValueInner.value = mergeAndCloneObjects(formValueTmpl, props.formValue);
  },
  { immediate: true, deep: true }
);
watch(
  formValueInner,
  () => {
    emits("change", cloneDeep(formValueInner.value));
  },
  { deep: true }
);
const handleExceTypeChange = val => {
  if (+val === 2) {
    formValueInner.value.cyclePerNum = 1;
    formValueInner.value.cyclePerUnit = "DAY";
  }
};
const handleExecDurationChange = val => {};
const handleExecDurationUnitChange = val => {};
const handleExtendDurationChange = val => {};
const handleExtendDurationUnitChange = val => {};
const handleTaskCreateTimehange = val => {};
const handlechangeCycleTime = val => {
  if (val && val.length > 0) {
    formValueInner.value.cycleTime = val.join(",");
  } else {
    formValueInner.value.cycleTime = "";
  }
};
function mergeAndCloneObjects(obj1, obj2) {
  const newObj = {};

  for (let key in obj1) {
    if (obj2.hasOwnProperty(key)) {
      newObj[key] = obj2[key];
    }
  }

  return cloneDeep(newObj);
}
const disabledDate = (time: Date) => {
  return time.getTime() < Date.now() - 86400000; // 禁用今天之前的日期
};
const disabledDateEnd = (time: Date) => {
  return time.getTime() < dayjs(formValueInner.value.execStartDate).valueOf();
  // if (formValueInner.value.execStartDate) {
  //   const start = dayjs(formValueInner.value.execStartDate).startOf("day");
  //   const today = dayjs().startOf("day");
  //   if (start.isBefore(today)) {
  //     // 如果 start 在今天之前，则禁用今天之前的日期
  //     return dayjs(time).isBefore(today);
  //   } else {
  //     // 否则，禁用小于或等于 start 的日期
  //     return dayjs(time).isBefore(today);
  //   }
  // }
  // return false;
};
</script>
